<template>
    <div class="login-container" :class="currentTheme">
      <!-- 头部导航 -->
      <div class="header">
        <div class="logo">
          <div class="logo-icon">
            <van-icon name="cash-back" size="24" />
          </div>
          <span>{{ $t('login.appName') }}</span>
        </div>
        <div class="language-selector" @click="showLocalePicker = true">
          <van-icon name="globe-o" />
          <span>{{ currentLocale === 'zh-CN' ? '中文' : 'English' }}</span>
        </div>
      </div>
      
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 标题区域 -->
        <div class="hero-section">
          <h1 class="hero-title">{{ $t('login.mainTitle') }}</h1>
          <p class="hero-subtitle">{{ $t('login.subTitle') }}</p>
          
          <div class="highlight-card">
            <h2 class="highlight-title">{{ $t('login.featureTitle') }}</h2>
            <p class="highlight-text">{{ $t('login.featureDesc') }}</p>
          </div>
        </div>
        
        <!-- 登录区域 -->
        <div class="login-form-container">
          <!-- 登录表单 -->
          <div class="login-card">
            <div class="login-header">
              <h2 class="login-title">{{ $t('login.loginTitle') }}</h2>
            </div>
            
            <van-form @submit="handleLogin" class="login-form">
              <div class="form-group">
                <label for="email" class="form-label">{{ $t('login.emailLabel') }}</label>
                <div class="input-group">
                  <van-icon name="envelop-o" class="input-icon" />
                  <van-field
                    v-model="email"
                    id="email"
                    name="email"
                    type="email"
                    :placeholder="$t('login.emailPlaceholder')"
                    class="form-input"
                    :rules="emailRules"
                  />
                </div>
              </div>
              
              <div class="form-group">
                <label for="password" class="form-label">{{ $t('login.passwordLabel') }}</label>
                <div class="input-group">
                  <van-icon name="lock" class="input-icon" />
                  <van-field
                    v-model="password"
                    id="password"
                    name="password"
                    :type="showPassword ? 'text' : 'password'"
                    :placeholder="$t('login.passwordPlaceholder')"
                    class="form-input"
                    :rules="passwordRules"
                  />
                  <van-icon 
                    :name="showPassword ? 'eye-o' : 'closed-eye'"
                    class="password-toggle"
                    @click="showPassword = !showPassword"
                  />
                </div>
              </div>
              
              <van-button 
                type="primary" 
                native-type="submit"
                class="login-button"
                :loading="loading"
                loading-text="登录中..."
              >
                {{ $t('login.loginButton') }}
              </van-button>
              
              <div class="login-links">
                <router-link to="/register" class="link">
                  {{ $t('login.registerLink') }}
                </router-link>
                <router-link to="/forgot-password" class="link">
                  {{ $t('login.forgotPasswordLink') }}
                </router-link>
              </div>
            </van-form>
          </div>
          
          <!-- 宣传信息 -->
          <div class="promotion-section">
            <h3 class="promotion-title">{{ $t('login.promoTitle') }}</h3>
            <p class="promotion-text">
              {{ $t('login.promoDesc') }}
            </p>
            
            <div class="visa-card">
              <div class="visa-logo">
                <span>VISA</span>
              </div>
              <div class="card-details">
                <div>{{ $t('login.cardName') }}</div>
                <div>{{ $t('login.cardType') }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 语言选择器 -->
      <van-popup v-model:show="showLocalePicker" position="bottom" round>
        <van-picker
          :columns="localeOptions"
          @confirm="onLocaleConfirm"
          @cancel="showLocalePicker = false"
        />
      </van-popup>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { useRouter } from 'vue-router';
  import { useThemeStore } from '@/stores/theme';
  import { useLocaleStore } from '@/stores/locale';
  import { showToast } from 'vant';
  
  const { t } = useI18n();
  const router = useRouter();
  const themeStore = useThemeStore();
  const localeStore = useLocaleStore();
  
  // 响应式数据
  const email = ref('');
  const password = ref('');
  const showPassword = ref(false);
  const showLocalePicker = ref(false);
  const loading = ref(false);
  
  // 计算属性
  const currentTheme = computed(() => themeStore.currentTheme);
  const currentLocale = computed(() => localeStore.currentLocale);
  
  // 验证规则
  const emailRules = [
    { required: true, message: t('login.emailRequired') },
    { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: t('login.emailInvalid') }
  ];
  
  const passwordRules = [
    { required: true, message: t('login.passwordRequired') },
    { min: 6, message: t('login.passwordMinLength') }
  ];
  
  // 语言选项
  const localeOptions = [
    { text: '中文', value: 'zh-CN' },
    { text: 'English', value: 'en-US' }
  ];
  
  // 方法
  const handleLogin = () => {
    loading.value = true;
    
    // 模拟登录请求
    setTimeout(() => {
      loading.value = false;
      showToast(t('login.loginSuccess'));
      router.push('/');
    }, 1500);
  };
  
  const onLocaleConfirm = (value) => {
    localeStore.setLocale(value.value);
    showLocalePicker.value = false;
    showToast(t('common.languageChanged'));
  };
  </script>
  
  <style lang="scss" scoped>
  .login-container {
    min-height: 100vh;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    background: var(--login-bg);
    color: var(--login-text);
    transition: background 0.3s ease;
  
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 20% 30%, var(--login-particle1) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--login-particle2) 0%, transparent 40%);
      z-index: -1;
    }
  
    &.light {
      --login-bg: linear-gradient(135deg, #f0f4f8, #e2e8f0);
      --login-text: #1e293b;
      --login-card-bg: rgba(255, 255, 255, 0.92);
      --login-border: #cbd5e1;
      --login-primary: #2563eb;
      --login-secondary: #8b5cf6;
      --login-success: #10b981;
      --login-highlight-bg: rgba(16, 185, 129, 0.15);
      --login-highlight-border: rgba(16, 185, 129, 0.3);
      --login-highlight-text: #065f46;
      --login-promo-bg: rgba(255, 255, 255, 0.7);
      --login-promo-border: rgba(203, 213, 225, 0.5);
      --login-visa-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0);
      --login-visa-border: #cbd5e1;
      --login-particle1: rgba(37, 99, 235, 0.08);
      --login-particle2: rgba(139, 92, 246, 0.08);
    }
  
    &.dark {
      --login-bg: linear-gradient(135deg, #0f172a, #1e293b);
      --login-text: #f8fafc;
      --login-card-bg: rgba(30, 41, 59, 0.92);
      --login-border: #334155;
      --login-primary: #60a5fa;
      --login-secondary: #a78bfa;
      --login-success: #34d399;
      --login-highlight-bg: rgba(16, 185, 129, 0.15);
      --login-highlight-border: rgba(16, 185, 129, 0.3);
      --login-highlight-text: #34d399;
      --login-promo-bg: rgba(30, 41, 59, 0.7);
      --login-promo-border: rgba(51, 65, 85, 0.5);
      --login-visa-bg: linear-gradient(135deg, #1a202c, #2d3748);
      --login-visa-border: #334155;
      --login-particle1: rgba(37, 99, 235, 0.15);
      --login-particle2: rgba(139, 92, 246, 0.15);
    }
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* 头部样式 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 30px;
  }
  
  .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--login-text);
    
    .logo-icon {
      background: var(--login-primary);
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
  }
  
  .language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--login-border);
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--login-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      background: rgba(255, 255, 255, 0.15);
    }
  }
  
  /* 主要内容 */
  .hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
  }
  
  .hero-title {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 16px;
    background: linear-gradient(to right, var(--login-primary), var(--login-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
    color: var(--login-text);
    max-width: 700px;
    margin-bottom: 25px;
    line-height: 1.6;
    opacity: 0.9;
  }
  
  .highlight-card {
    background: var(--login-highlight-bg);
    border: 1px solid var(--login-highlight-border);
    border-radius: 12px;
    padding: 16px 22px;
    margin: 20px 0;
    max-width: 600px;
  }
  
  .highlight-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--login-highlight-text);
  }
  
  .highlight-text {
    font-size: 1rem;
    color: var(--login-highlight-text);
    opacity: 0.9;
  }
  
  /* 登录表单 */
  .login-form-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  
  .login-card {
    background: var(--login-card-bg);
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;
    color: var(--login-text);
    backdrop-filter: blur(10px);
    border: 1px solid var(--login-border);
  }
  
  .login-header {
    text-align: center;
    margin-bottom: 28px;
  }
  
  .login-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--login-text);
    margin-bottom: 8px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--login-text);
  }
  
  .input-group {
    position: relative;
  }
  
  .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--login-primary);
    z-index: 2;
  }
  
  :deep(.van-field) {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 1px solid var(--login-border);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.1);
    color: var(--login-text);
    
    &::placeholder {
      color: var(--login-text);
      opacity: 0.6;
    }
    
    &:focus-within {
      border-color: var(--login-primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }
  }
  
  .password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--login-text);
    opacity: 0.7;
    cursor: pointer;
    z-index: 2;
  }
  
  .login-button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, var(--login-primary), var(--login-secondary));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    
    &:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
  }
  
  .login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  
  .link {
    color: var(--login-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 0.95rem;
    
    &:hover {
      color: var(--login-secondary);
      text-decoration: underline;
    }
  }
  
  /* 底部宣传 */
  .promotion-section {
    background: var(--login-promo-bg);
    border-radius: 16px;
    padding: 25px;
    margin-top: 30px;
    max-width: 450px;
    border: 1px solid var(--login-promo-border);
    backdrop-filter: blur(5px);
  }
  
  .promotion-title {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 14px;
    background: linear-gradient(to right, var(--login-primary), var(--login-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .promotion-text {
    font-size: 0.95rem;
    color: var(--login-text);
    line-height: 1.6;
    opacity: 0.9;
  }
  
  .visa-card {
    margin-top: 25px;
    padding: 18px;
    background: var(--login-visa-bg);
    border-radius: 16px;
    border: 1px solid var(--login-visa-border);
  }
  
  .visa-logo {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
    
    span {
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--login-text);
      letter-spacing: 1px;
    }
  }
  
  .card-details {
    display: flex;
    justify-content: space-between;
    color: var(--login-text);
    font-size: 1.05rem;
    font-weight: 500;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2rem;
    }
    
    .login-form-container {
      gap: 30px;
    }
    
    .promotion-section {
      margin-top: 30px;
    }
    
    .login-card {
      padding: 30px;
    }
  }
  
  @media (max-width: 480px) {
    .header {
      flex-direction: column;
      gap: 15px;
      text-align: center;
    }
    
    .hero-title {
      font-size: 1.7rem;
    }
    
    .hero-subtitle {
      font-size: 1rem;
    }
    
    .login-card {
      padding: 25px 20px;
    }
    
    .highlight-card {
      padding: 14px 18px;
    }
    
    .highlight-title {
      font-size: 1.2rem;
    }
  }
  </style>